<template>
  <div class="ant-descriptions ant-descriptions-bordered">
    <div class="ant-descriptions-title">
      <span>打卡率和达标率</span>
    </div>
    <div
      v-if="report && report.rate && report.punchRate && report.complianceRate"
      :style="{ width: '100%', paddingTop: '3rem' }"
    >
      <line-charts
        :key="initCharts"
        :x-axis-data="charts.axisData"
        :y-axis-unit="charts.axisUnit"
        :legend="charts.legend"
        :series-data="charts.seriesData"
      />
    </div>
    <div v-else>
      <a-empty :image="simpleImage" />
    </div>
  </div>
</template>

<script>
import LineCharts from '@views/report1/components/LineChart'
import { Empty } from 'ant-design-vue'

export default {
  name: 'PunchRateComplianceRate',
  components: {
    LineCharts,
  },
  props: ['report'],
  data() {
    return {
      initCharts: 'init',
      charts: {
        axisData: [],
        axisUnit: '%',
        legend: ['打卡率', '达标率'],
      },
    }
  },
  created() {
//  let tempPunchRate = this.report.punchRate.map((item, index) => {
//    return this.handleString(item).toString()
//  })
//
//  let tempComplianceRate = this.report.complianceRate.map((item, index) => {
//    return this.handleString(item).toString()
//  })
    this.charts.axisData = this.report.rate
    this.charts.seriesData = this.report.dataList
  },
  methods: {
    handleString(str) {
      return parseInt(str.split('%')[0])
    },
  },
  beforeCreate() {
    this.simpleImage = Empty.PRESENTED_IMAGE_SIMPLE
  },
}
</script>

<style lang="less" scoped></style>
